<script>
import { reactive, toRefs } from 'vue';
import request from '../request';
import { Back } from '@element-plus/icons-vue';
export default {
	name: 'StoryPage',
	components: { Back },
	setup() {
		const data = reactive({
			list: [],
			show: false,
			num: 0,
		});
		const init = () => {
			const params = {
				page: 1,
				size: 100,
				type: 'story',
			};
			request('/getHome', params).then((res) => {
				console.log('res-------', res);
				if (res.status === 'S') {
					data.list = res.data;
				}
			});
		};
		init();
		const goStory = (k) => {
			data.num = k;
			data.show = true;
		};
		return {
			...toRefs(data),
			goStory,
		};
	},
};
</script>
<template>
	<div class="story-page">
		<template v-if="!show">
			<ul class="flexr flexcc flexjb fr">
				<li v-for="(item, index) in list" :key="index" class="flexc flexja" @click="goStory(index)">
					<h4>{{ item.title }}</h4>
					<p>{{ item.des }}</p>
				</li>
			</ul>
		</template>
		<template v-else>
			<div class="flexr flexcc flexjc pot">
				<div class="po flexr flexcc" @click="() => (show = false)">
					<el-icon><Back /></el-icon>
					<span>返回上一页</span>
				</div>
				<h4>{{ list[num].title }}</h4>
			</div>
			<div class="ca">
				<p v-for="(val, k) in list[num].content" :key="k">{{ val }}</p>
			</div>
		</template>
	</div>
</template>
<style lang="less">
.story-page {
	width: 100%;
	height: 100%;
	overflow: auto;
	li {
		width: 30%;
		height: 140px;
		border: 1px solid #eee;
		box-sizing: border-box;
		padding: 20px 40px;
		text-align: center;
		margin-bottom: 20px;
		border-radius: 14px;
		box-shadow: 0 0 8px #eee;
	}
	.pot {
		position: relative;
		padding-bottom: 20px;
		border-bottom: 1px solid #eee;
	}
	.po {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.ca {
		padding: 20px 40px 0;
	}
}
</style>
